<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>login</title>
  <link rel="stylesheet" href="./css/login.css">
</head>

<body>
  <div class="container">
    <div class="login">
      <div class="login-top">
        登录
      </div>
      <div class="login-center clearfix">
        <div class="login-center-img"><img src="images/name.png"></div>
        <div class="login-center-input">
          <input type="text" name="" value="" placeholder="请输入您的用户名" onfocus="this.placeholder=''"
            onblur="this.placeholder='请输入您的用户名'">
          <div class="login-center-input-text">用户名</div>
        </div>
      </div>
      <div class="login-center clearfix">
        <div class="login-center-img"><img src="images/password.png"></div>
        <div class="login-center-input">
          <input type="password" name="" value="" placeholder="请输入您的密码" onfocus="this.placeholder=''"
            onblur="this.placeholder='请输入您的密码'">
          <div class="login-center-input-text">密码</div>
        </div>
      </div>

      <div class="login-button">
        登录
      </div>
    </div>
    <div class="sk-rotating-plane"></div>
  </div>
</body>
<script>
  const userName = document.querySelector('input[type=text]')
  const pwd = document.querySelector('input[type=password]')
  const btn = document.querySelector('.login-button')
  btn.addEventListener('click', function () {
    console.log(userName.value, pwd.value)
    const url = "localhost:8001/login"
    fetch(url, {
      method: "GET",
      mode: 'cors',
      cache: 'default'
    }).then(function (response) {
      return response.json() //响应内容json化
    }).then(function (res) {
      console.log(res)  //打印响应值
    })
  })
</script>

</html>